<template>
    <div>
        <div class="user-info">
            <van-image
            round
            width="4rem"
            height="4rem"
            :src="user.portrait"
            />
            <div class="name">
                <p>{{user.username}}</p>
                <p>欢迎回来~</p>
            </div>
            <i class="iconfont icon-erweima"></i>
            <i class="iconfont icon-shezhi"></i>
        </div>
        <van-cell-group>
            <van-cell title="我的订单" value="全部订单" is-link/>
        </van-cell-group>
        <div class="order-list">
            <div class="item">
                <i class="iconfont icon-daifukuan"></i>
                <p>代付款</p>
            </div>
            <div class="item">
                <i class="iconfont icon-daifahuo"></i>
                <p>待发货</p>
            </div>
            <div class="item">
                <i class="iconfont icon-daishouhuo"></i>
                <p>待收货</p>
            </div>
            <div class="item">
                <i class="iconfont icon-pinglun"></i>
                <p>待评价</p>
            </div>
            <div class="item">
                <i class="iconfont icon-shouhou"></i>
                <p>退款/售后</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user:{}
        }
    },
    created(){
        this.user = this.$store.getters.wxUserInfo.userinfo;
        console.log(this.user);
    }
}
</script>
<style lang="scss" scoped>
    $white:#fff;
    .user-info{
        width: 100%;
        height: 8rem;
        background: url('../assets/userCenter_bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: $white;
        .name{
            width: 50%;
            font-size: 0.8rem;
            p:first-child{
                font-size: 1.2rem;
                font-weight: bolder;
            }
        }
        .iconfont{
                font-size: 2rem;
            }
    }
    .van-cell__title{
        font-size: 1rem;
    }
    .order-list{
        width: 100%;
        height: 4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item{
            text-align: center;
            font-size: 0.7rem;
            color: #545454;
            .iconfont{
                font-size: 2rem;
            }
        }
    }
</style>